<template>
	<view>
		<appBar title="银行卡管理"></appBar>
		<view class="pall20">
			银行卡 <text class="tipsText">( {{visibleBankList.length}} )张</text>
		</view>
		<view class="pall20">
			<bankItem v-for="(item, index) in visibleBankList" :key="index" :bankCode="item.bankCode"
				:bankName="item.bankName" :cardCode="item.cardCode" :uuid="item.uuid" @click="gotoPage(`/pages/tabbar/mine/page/bankList/bankInfo/bankInfo?bankItem=${JSON.stringify(item)}`)" />
		</view>

	</view>
</template>

<script>
	import bankItem from '@/components/bankItem/bankItem.vue'

	export default {
		components: {
			bankItem
		},
		data() {
			return {
				// 所有银行数据
				bankList: [{
						bankCode: 'CCB',
						bankName: '中国建设银行',
						cardCode: '5106365987639',
						uuid: 'bank1'
					},
					{
						bankCode: 'ABC',
						bankName: '中国农业银行',
						cardCode: '5106365987639',
						uuid: 'bank3'
					},
					{
						bankCode: 'CMB',
						bankName: '中国招商银行',
						cardCode: '5106365987639',
						uuid: 'bank4'
					},
					{
						bankCode: 'ICBC',
						bankName: '中国工商银行',
						cardCode: '5106365987639',
						uuid: 'bank5'
					},
					{
						bankCode: 'BOC',
						bankName: '中国银行',
						cardCode: '5106365987639',
						uuid: 'bank6'
					}
				],
				// 控制可见的银行数据（用于队列渲染）
				visibleBankList: []
			};
		},
		created() {
			this.renderBanksWithDelay();
		},
		methods: {
			async renderBanksWithDelay() {
				// 遍历 bankList，逐个加入 visibleBankList
				for (let i = 0; i < this.bankList.length; i++) {
					// 延迟添加，每个银行项间隔 500 毫秒
					await this.delay(500);
					this.visibleBankList.push(this.bankList[i]);
				}
			},
			// 延迟函数
			delay(ms) {
				return new Promise(resolve => setTimeout(resolve, ms));
			}
		}
	}
</script>

<style lang="scss">

</style>